<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout/default" lang="en">
<head>
  <style>
    body {
      background-color: #f2f2f2;
      font-family: Arial, sans-serif;
    }
    h2 {
      text-align: center;
      margin-top: 50px;
    }
    form {
      width: 400px;
      margin: 0 auto;
      background-color: #fff;
      padding: 30px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      border-radius: 5px;
    }
    label {
      display: block;
      margin-bottom: 10px;
    }
    input[type="text"], input[type="password"] {
      width: 100%;
      padding: 10px;
      border-radius: 3px;
      border: none;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    input[type="submit"] {
      background-color: #006699;
      color: #fff;
      font-size: 16px;
      padding: 10px 20px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
    input[type="submit"]:hover {
      background-color: #005580;
    }
    button {
      background-color: #fff;
      color: #006699;
      font-size: 16px;
      padding: 10px 20px;
      border: 1px solid #006699;
      border-radius: 3px;
      cursor: pointer;
      margin-left: 20px;
    }
    button:hover {
      background-color: #006699;
      color: #fff;
    }

  </style>
  <meta charset="UTF-8">
  <title>登录页</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#login-form").submit(function (event) {
        event.preventDefault(); // 阻止表单默认提交行为
        $.ajax({
          url: "/login",
          type: "POST",
          data: $("#login-form").serialize(),
          dataType: "json",
          success: function (data) {
            if (data.code===1) {
              window.location.href = "/chat?username=" + data.data.username;
            } else if(data.code===0){
              alert(data.msg);
            }
          },
          error: function () {
            alert("请求失败，请检查网络连接！");
          }
        });
      });
    });
  </script>
</head>
<body>
<div>
  <h2>登录页</h2>
  <form id="login-form">
    <p>
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username"/>
    </p>
    <p>
      <label for="password">密码：</label>
      <input type="password" id="password" name="password"/>
    </p>
    <p>
      <button type="submit">登录</button>
    </p>
  </form>
</div>
</body>
</html>